<template>
  <div
    style="user-select: text !important"
    :style="{ '--theme': $store.getters.themeColor }"
    class="eventDetailWrapper"
  >
    <el-row class="container">
      <el-row style="height: 100%">
        <!-- 左侧 -->
        <el-col :span="18" class="container-left">
          <div id="mapbox-wrapper"></div>
          <el-col :span="24" class="buttons" style="padding-right: 6px">
            <!-- Tab 切换功能区 -->
            <el-tabs
              :value="isShowView"
              @tab-click="(tab) => changeFun(tab.name)"
              class="event_small_tab_height"
              style="width: 100%"
            >
              <el-tab-pane label="基本信息" name="0"></el-tab-pane>
              <el-tab-pane
                label="详细信息"
                name="7"
                v-if="userIdIsShow"
              ></el-tab-pane>
              <el-tab-pane
                label="关联告警"
                name="11"
                v-if="alarmIsShow"
              ></el-tab-pane>
              <el-tab-pane
                :label="nameType(item.realLinkType.toString())"
                :name="item.realLinkType.toString()"
                v-for="item in linkIdList"
                :key="item.linkId"
              ></el-tab-pane>
              <el-tab-pane label="办理过程" name="81"></el-tab-pane>
              <el-tab-pane label="领导批示" name="9"></el-tab-pane>
              <el-tab-pane label="督办记录" name="15"></el-tab-pane>
            </el-tabs>
          </el-col>
          <el-col :span="24" class="leftClass" v-show="isShowView === '0'">
            <el-row style="height: 100%">
              <el-col :span="24" class="rightview" style="height: 100%">
                <el-col :span="12" class="common-scroll" style="width: 33%">
                  <el-collapse v-model="activeNames">
                    <el-collapse-item
                      name="20"
                      v-if="orderData.alarmLableRelDTOS?.length"
                    >
                      <custom-title slot="title" name="告警标签" />
                      <alarm-label-info :tags="orderData.alarmLableRelDTOS" />
                    </el-collapse-item>
                    <el-collapse-item name="1">
                      <CustomTitle slot="title" name="事件信息"></CustomTitle>
                      <alarm-info
                        :orderData="orderData"
                        :position="position"
                        :monitors="monitors"
                        hiddenTitle
                        isDetail
                        showAddressWord
                        hasTimeLine
                        :rightLabelCol="8"
                        style="margin-bottom: 30px"
                        isSingleColumn
                      />
                    </el-collapse-item>
                    <el-collapse-item name="2">
                      <CustomTitle slot="title" name="告警来源"></CustomTitle>
                      <alarm-source
                        :orderData="orderData"
                        :reldeviceData="reldevice"
                        :positionMonitor="positionMonitor"
                        hiddenTitle
                        isSingleColumn
                      />
                    </el-collapse-item>
                  </el-collapse>
                </el-col>
                <!-- 视频、图片、地图，缩略及大图组件 -->
                <el-col :span="12" style="height: 100%; width: 67%">
                  <div class="right" style="height: 100%; padding-left: 12px">
                    <medias-comp
                      :imgs="imgsList"
                      :order="orderData"
                      :video="videoData"
                      :position.sync="position"
                      :positionMonitor.sync="positionMonitor"
                      v-on="$listeners"
                    />
                  </div>
                </el-col>
              </el-col>
            </el-row>
          </el-col>
          <!-- tab 切换显示的内容（基本信息意外的内容） -->
          <el-col
            :span="24"
            v-show="isShowView !== '0'"
            class="eventDetailAll"
            style="
              height: 100%;
              width: 100%;
              overflow-y: auto;
              overflow-x: hidden;
            "
          >
            <!-- 详细信息 -->
            <alarm-detail-info
              v-show="isShowView === '7'"
              :detailData="orderDetail"
              :orderData="orderData"
            />
            <!--  -->
            <command-dispatch-process
              v-show="isShowView === '8'"
              :viewDataSouse="commandDispatchDataSource"
            >
            </command-dispatch-process>
            <dev-process
              v-if="isShowView === '1'"
              :viewDataSouse="judgeDataSource"
              :judgeResult="judgeResult"
            ></dev-process>
            <scheduling-process
              v-if="isShowView === '2'"
              :viewDataSouse="dispatchDataSource"
            ></scheduling-process>
            <disposal-process
              v-if="isShowView === '4'"
              :viewDataSouse="disposalDataSource"
            ></disposal-process>
            <verification-process
              v-if="isShowView === '5'"
              :viewDataSouse="verificationDataSource"
            ></verification-process>
            <underway-process
              v-if="isShowView === '81'"
              :viewDataSouse="dwpDataSource"
            ></underway-process>
            <leadership-instructions
              v-if="isShowView === '9'"
              :viewDataSouse="leaderDataSource"
            ></leadership-instructions>
            <supervision-record
              v-if="isShowView === '15'"
              :viewDataSouse="supervisionDataSource"
            ></supervision-record>
            <timer-shaft
              ref="timershaft"
              v-show="isShowView === '10'"
              :orderId="warningOrderId"
              :eChartsHeight="eChartsHeight"
              :eChartsWidth="eChartsWidth"
            ></timer-shaft>
            <el-tabs
              v-show="isShowView === '11'"
              style="height: 100%; overflow-y: scroll"
              tab-position="left"
              v-model="activeName"
              class="tabsPane height-full"
            >
              <template
                v-for="(item, index) in relatedData"
                style="height: 100%"
              >
                <el-tab-pane
                  :name="index + ''"
                  :key="item.warningOrderId"
                  style="height: 100%"
                >
                  <span slot="label" :key="item.warningOrderId" class="tabPane">
                    <div class="round-style">{{ index + 1 }}</div>
                    <div
                      v-if="index != relatedData.length - 1"
                      style="
                        width: 1px;
                        height: 24px;
                        background: #dcdfe6;
                        margin: 6px auto 0;
                      "
                    />
                  </span>
                  <!-- <alarmPanel :dataSource="orderData" :alarmid="index" /> -->

                  <alarmPanel
                    :dataSource="relatedData[index]"
                    :mainAlarmInfo="{
                      emergencyLevelName: orderData.emergencyLevelName,
                      address: orderData.address,
                    }"
                    :alarmid="index + ''"
                  />
                </el-tab-pane>
              </template>
            </el-tabs>
          </el-col>
        </el-col>
        <!-- 右侧时间轴 -->
        <el-col :span="6" class="time-line">
          <el-scrollbar
            class="scrollbar"
            @scroll.prevent
            style="width: 100%; height: 100%"
          >
            <el-col>
              <timeLineModel
                class="timeLineModel"
                :timeline="allDataSource"
                :viewDataSource="orderData"
                :height="pageHeight"
              ></timeLineModel>
            </el-col>
          </el-scrollbar>
        </el-col>
      </el-row>
    </el-row>

    <hr class="custom-hr" />
    <el-row
      class="bottom-buttons"
      v-if="
        !isDisabled()
          ? true
          : ['1', '3', '4', '11'].includes(orderData.warningSource)
      "
    >
      <!--底部操作按钮-->
      <div class="buttons">
        <div class="left-btns">
          <el-button
            type="default"
            @click="editAlarmLabel"
            v-hasPermi="['event:details:editTags']"
            v-if="orderData.warningOrderId"
            ><span>编辑告警标签</span>
          </el-button>
          <el-button
            type="default"
            @click="toPTZ"
            v-hasPermi="['event:details:ptz']"
            v-if="getShowPTZ()"
            ><span>一键看向告警点</span>
          </el-button>
          <el-button
            type="default"
            @click="videoClick"
            v-hasPermi="['event:details:video']"
            v-if="['1', '3', '4', '11'].includes(orderData.warningSource)"
            ><span>实时视频</span>
          </el-button>
        </div>
        <el-button
          v-hasPermi="['event:details:supervise']"
          v-if="
            !isDisabled() &&
            isLeader &&
            ['1', '2', '4', '5'].includes(orderData.orderStatus)
          "
          class="supervision-btn"
          type="danger"
          plain
          @click="handleSupervision"
          >督办</el-button
        >
      </div>
    </el-row>
    <!--  实时视频dialog-->
    <video-dialog
      @videoCancelFun="videoCancelFun"
      :isVideoList="isVideoList"
      :positionLeft="'50%'"
      :positionTop="'50%'"
      :transform="'translate(-50%,-50%)'"
    ></video-dialog>
    <!--  告警标签  -->
    <alarm-label
      :visible.sync="showLabelConfig"
      @close="closeLabel"
      :orderData.sync="orderData"
    ></alarm-label>
    <!--  督办弹窗  -->
    <SupervisionDialog
      :visible.sync="isSupervision"
      :orderData="orderData"
      @supervisionSuccess="getSupervisionRecord"
    ></SupervisionDialog>
  </div>
</template>

<script>
import $ from "jquery";
import alarmPanel from "@/views/pages/eventManagement/alarmPanel";
import timeLineModel from "@/views/pages/eventManagement/timeLine";
import DevProcess from "@/views/pages/eventManagement/eventDetailAll/devProcess";
import VerificationProcess from "@/views/pages/eventManagement/eventDetailAll/verificationProcess";
import OverdueManagement from "@/views/pages/eventManagement/eventDetailAll/overdueManagement";
import CuibanManagement from "@/views/pages/eventManagement/eventDetailAll/cuibanManagement";
import UnderwayProcess from "@/views/pages/eventManagement/eventDetailAll/underwayProcess";
import LeadershipInstructions from "@/views/pages/eventManagement/eventDetailAll/leadershipInstructions";
import DisposalProcess from "@/views/pages/eventManagement/eventDetailAll/disposalProcess";
import SchedulingProcess from "@/views/pages/eventManagement/eventDetailAll/schedulingProcess";
import commandDispatchProcess from "@/views/pages/eventManagement/eventDetailAll/commandDispatchProcess";
import SupervisionRecord from "@/views/pages/eventManagement/eventDetailAll/supervisionRecord";
import SupervisionDialog from "@/views/pages/eventManagement/eventDialog/SupervisionDialog";
import TimerShaft from "@/views/pages/eventManagement/eventDetailAll/timerShaft";
import { $store } from "@/utils/store";
import {
  getLeaderListByOrderId,
  getRecordByType,
  getOrderInfo,
  getRecordByOrderId,
  getVideoPlaybackUrl,
  queryFlowLink,
  warningOrderInfoRel,
  getDeviceChannel4Tt,
  getDeviceInfo,
} from "@/api/modules/eventManagement/eventDetail";
import { getHandleRecordByOrderId } from "@/api/modules/eventManagement/eventDialog/supervision-dialog.js";
import "@/assets/font/iconfont.css";
import { $getUrlParam, getQueryString } from "@/utils/common";
import CustomTitle from "../Title.vue";
import MediasComp from "../Medias.vue";
import EventProcess from "../eventProcess.vue";
import AlarmInfo from "@/components/eventManagement/infos/AlarmInfo";
import AlarmSource from "@/components/eventManagement/infos/AlarmSource";
import AlarmDetailInfo from "../infos/AlarmDetailInfo.vue";
import videoDialog from "@/views/pages/eventManagement/eventDialog/videoDialog.vue";
import { doControlPreset, doPtzLocationCmd } from "@/api/video/video";
import alarmLabel from "@/views/pages/eventManagement/eventDialog/alarmLabel";
import alarmLabelInfo from "@/components/eventManagement/infos/alarmLabelInfo.vue";
import eventBus from "@/utils/event-bus";
export default {
  components: {
    EventProcess,
    CustomTitle,
    TimerShaft,
    SchedulingProcess,
    DisposalProcess,
    LeadershipInstructions,
    UnderwayProcess,
    CuibanManagement,
    OverdueManagement,
    VerificationProcess,
    DevProcess,
    timeLineModel,
    alarmPanel,
    commandDispatchProcess,
    MediasComp,
    AlarmInfo,
    AlarmSource,
    AlarmDetailInfo,
    videoDialog,
    alarmLabel,
    alarmLabelInfo,
    SupervisionRecord,
    SupervisionDialog,
  },
  computed: {
    isLeader() {
      return this.$store.getters.userInfo.roleIds.includes("8");
    },
  },
  props: {
    orderDetail: {
      type: Object,
      default: () => ({}),
    },
    orderData: {
      type: Object,
      default: () => ({}),
    },
    reldevice: {
      type: Object,
      default: () => {},
    },
    monitors: {
      type: Array,
      default: () => [],
    },
    videoData: {
      type: Object,
      default: () => ({}),
    },
    imgsList: {
      type: Array,
      default: () => [],
    },
    warningOrderId: {
      type: String,
      default: "",
    },
  },
  watch: {
    orderData(val) {
      this.getFlowAttr(val);
      this.isShowView = "0";
    },
    warningOrderId() {
      this.player?.closeAllVideo();
      this.initData();
    },
  },
  created() {
    let info = $store.get("$loginInfo");
    this.power = [];
    if (info.power && info.power["/rpnEeventMt"]) {
      this.power = info.power["/rpnEeventMt"];
    }
    if (info.power && info.power["/fAlarmManagement"]) {
      for (let i = 0; i < info.power["/fAlarmManagement"].length; i++) {
        this.power.push(info.power["/fAlarmManagement"][i]);
      }
    }
  },
  mounted() {
    this.urlSource = getQueryString("type");
    this.oldOrderId = getQueryString("oldOrderId");
    this.oldList = getQueryString("oldList");
    this.eChartsHeight = "600px";
    this.eChartsWidth = $(".eventDetailAll").width() + "px";
    this.pageHeight = "688px";
    this.getUserState();
    if (this.warningOrderId) {
      this.initData();
    }
    this.$nextTick(this.changeTagTitle);
  },
  methods: {
    initData() {
      this.getRecordByOrder();
      this.warningOrderInfoRel(this.warningOrderId);
      this.changeFun(this.isShowView);
    },
    changeTagTitle() {
      const selectedTag = this.visitedViews.findLast(
        (item) => item.fullPath === this.$route.fullPath
      );
      selectedTag.title = "告警事件详情";
      this.$store.dispatch("tagsView/updateVisitedView", selectedTag);
    },
    warningOrderInfoRel(orderId) {
      let params = {
        userId: this.$store.getters.userInfo.userId,
        appVerCode: this.$store.getters.userInfo.chooseAppVerCode,
        duplicateOrderId: orderId,
      };
      warningOrderInfoRel(params).then((res) => {
        if (res.code == 200) {
          this.relatedData = res.data;
          if (res.data) {
            this.alarmIsShow = res.data.length === 0 ? false : true;
          }
        }
      });
    },
    onPlayerPlay(player) {
      player.play();
    },
    getUserState() {
      let user = this.$store.getters.userInfo;
      this.userIdIsShow = user.tenantId ? false : true;
    },
    changeFun(val) {
      this.isShowView = val;
      if (val !== "0") {
        eventBus.$emit("move-map-to-other-view");
      } else {
        eventBus.$emit("click-footer-map");
      }
      switch (val) {
        case "0": //基本信息
          break;
        case "1": //研判过程
          this.getRecordByType("1");
          break;
        case "2": //调度过程
          this.getRecordByType("2");
          break;
        case "4": //处置过程
          this.getRecordByType("4");
          break;
        case "5": //核实过程
          this.getRecordByType("5");
          break;
        case "8": //指挥调度
          this.getRecordByType("8");
          break;
        case "81": //办理过程
          break;
        case "9": //领导批示
          this.getLeaderListByOrder();
          break;
        case "10": //时间轴
          this.$refs.timershaft.initeCharts();
          break;
        case "11": //关联告警
          // this.$refs.timershaft.initeCharts();
          break;
        case "15": //督办记录
          this.getSupervisionRecord();
          break;
      }
    },
    nameType(val) {
      switch (val) {
        case "1": //研判过程
          return "研判过程";
        case "2": //调度过程
          return "调度过程";
        case "4": //处置过程
          return "处置过程";
        case "5": //核实过程
          return "核实过程";
        case "8": //指挥调度
          return "指挥调度";
      }
    },
    getLeaderListByOrder() {
      let _this = this;
      getLeaderListByOrderId({ orderId: _this.warningOrderId }).then(
        (result) => {
          if (result.code === 200) {
            _this.leaderDataSource = result.data.rows;
          }
        }
      );
    },
    getRecordByType(realLinkType) {
      let _this = this;
      let params = {
        orderId: _this.warningOrderId,
        realLinkType: realLinkType,
        linkId: this.orderData.linkId,
      };
      if (realLinkType == "5") {
        params.queryList = 1;
      }
      getRecordByType(params).then((result) => {
        if (result.code === 200) {
          switch (realLinkType) {
            case "1": //研判
              _this.judgeDataSource = result.data.rows;
              break;
            case "2": //调度
              _this.dispatchDataSource = result.data.rows;
              break;
            case "3": //认领
              // _this.dispatchDataSource=result.data;
              break;
            case "4": //处置
              _this.disposalDataSource = result.data.rows;
              break;
            case "5": //核实
              _this.verificationDataSource = result.data.rows;
              break;
            case "8": //指挥调度
              _this.commandDispatchDataSource = result.data.rows;
              break;
          }
        }
      });
    },
    getFlowAttr(data) {
      // const _this = this;
      if (!data.flowId) {
        return false;
      }
      let industryCode = this.orderData.tradeId;
      let appVerCode = this.orderData.appVerCode;
      queryFlowLink({
        flowId: data.flowId,
        intercept: data.intercept,
        industryCode: industryCode,
        appVerCode: appVerCode,
        warningSource: data.warningSource,
        templateId: data.flowTemplate,
        // linkId: this.orderData.linkId,
      }).then((res) => {
        if (res.code === 200) {
          const linkIdList = [];
          res.data.forEach((item) => {
            if (item.realLinkType != 6 && item.realLinkType != 18) {
              if (
                !linkIdList.find(
                  (obj) => obj.realLinkType == item.realLinkType
                ) &&
                item.realLinkType != "7" &&
                item.realLinkType
              ) {
                linkIdList.push(item);
              }
            }
          });
          // if (this.temp.length > 0) {
          //   let indexA = "";
          //   linkIdList.map((item, index) => {
          //     // if (item.linkId === 8) {
          //     //   let temp = "";
          //     //   temp = this.linkIdList[index];
          //     //   this.linkIdList[index] = this.linkIdList[index - 1];
          //     //   this.linkIdList[index - 1] = temp;
          //     // }

          //     if (item.linkId == this.currentLinkId) {
          //       indexA = index;
          //     }
          //   });
          //   linkIdList.splice(indexA, 0, this.commandTab);
          // }
          this.linkIdList = linkIdList;
          let realLinkTypeList = ["1", "2", "4", "5"];
          // realLinkTypeList.map((a) => {
          //     if (!this.linkIdList.find((item) => item.realLinkType == a)) {
          //         this.linkIdList.push({ realLinkType: a })
          //     }
          // })
          for (const a of realLinkTypeList) {
            if (!this.linkIdList.find((item) => item.realLinkType == a)) {
              this.linkIdList.push({ realLinkType: a });
            }
          }
          this.linkIdList.sort((a, b) => {
            return a.realLinkType - b.realLinkType;
          });
        }
      });
    },
    getRecordByOrder() {
      let _this = this;
      getRecordByOrderId({ orderId: _this.warningOrderId }).then((result) => {
        if (result.code === 200) {
          _this.allDataSource = result.data.rows;
          for (let i = 0; i < _this.allDataSource.length; i++) {
            _this.allDataSource[i].flowNodeTime = _this.allDataSource[
              i
            ].flowNodeTime.replace(/-/g, "/");
          }
          _this.dwpDataSource = result.data.rows;
          result.data.rows.map((item, index) => {
            if (item.linkId == 8) {
              _this.temp.push(index);
            }
            //如果关闭了事件，办理过程中不显示当前环节信息
            if (item.remark && item.remark.indexOf("关闭告警") > -1) {
              result.data.rows.splice(index, 1);
            }
          });
          if (_this.temp.length) {
            let firstIndex = Math.max.apply(null, _this.temp);
            _this.currentLinkId = result.data.rows[firstIndex + 1].linkId;
          }
        }
      });
    },
    isDisabled() {
      let source = this.$store.getters.userInfo.userType;
      return source === "0";
    },
    videoDataFun(data, orderData) {
      let _this = this;
      let info = _this.$store.getters.userInfo;
      let params = {
        deviceCode: orderData.deviceCode, //设备编码
        channelCode: orderData.channelCode, //通道编码
        protocolType: "3", //协议类型
        storageType: "1", //存储类型
        startTime: data.startTime, //开始时间
        endTime: data.endTime, //结束时间
        customerCode: info.tenantId, //客户编码（租户id）
      };
      getVideoPlaybackUrl(params).then((resp) => {
        if (resp && resp.code == "200") {
          _this.videoUrl = resp.data.streamUrl;
          _this.playerOptions.sources[0].src = _this.videoUrl;
        } else {
          $message.warning(resp.msg);
        }
      });
    },
    videoCancelFun(data) {
      this.isVideoList.isVideo = data;
    },
    //摄像机转向告警点
    toPTZ() {
      const { deviceCode, channelCode, pan, tilt, zoom, presetId } =
        this.orderData;
      let ptzFlag =
        Number(pan) !== 0 || Number(tilt) !== 0 || Number(zoom) !== 0;
      // 转动至ptz
      if (ptzFlag) {
        // isAuth 是否鉴权   0
        doPtzLocationCmd({
          deviceCode,
          channelCode,
          pan,
          tilt,
          zoom,
          ptzIsEsc: "1",
          isAuth: "0",
        }).then((res) => {
          if (res.code == 200) {
            this.videoClick();
            // this.$message.success("操作成功")
          } else {
            $message.a(res);
          }
        });
      }
      //转动至预置位
      if (!ptzFlag && presetId != "") {
        let params = {
          deviceCode: deviceCode, //设备编码
          channelCode: channelCode, //通道编码
          presetId: presetId, //预置位 id
          customerCode: this.$store.getters.userInfo.tenantId, //租户id
          isAuth: "0",
        };
        doControlPreset(params).then((res) => {
          if (res.code === 200) {
            this.videoClick();
            $message.success("操作成功");
          } else {
            $message.a(res);
            //this.$message.error(res.msg);
          }
        });
      }
    },
    // 实时视频
    async videoClick() {
      let _this = this;
      let channelCodeList = [];
      if (this.isDisabled()) {
        getDeviceChannel4Tt({ deviceCode: this.orderData.deviceCode }).then(
          (res) => {
            if (res.code === 200) {
              channelCodeList = res.data.channels; // 通道列表
              if (channelCodeList && channelCodeList.length > 0) {
                let channelCodeData = {
                  isVideoList: channelCodeList.map((item) => {
                    return {
                      deviceCode: this.orderData.deviceCode,
                      channelCode: item.channelCode,
                      monitorName: item.channelName,
                    };
                  }),
                  numberList: channelCodeList.length,
                  videoThis: this,
                };
                this.player = this.$splitScreen(channelCodeData);
              }
            }
          }
        );
      } else {
        getDeviceInfo({
          deviceCode: this.orderData.deviceCode,
          operType: "1",
          tenantId: this.$store.getters.userInfo.tenantId,
        }).then((res) => {
          if (res.code === 200) {
            channelCodeList = res.data.children; // 通道列表
            if (channelCodeList && channelCodeList.length > 0) {
              let channelCodeData = {
                isVideoList: channelCodeList.map((item) => {
                  return {
                    channelCode: item.channelCode,
                    monitorName: item.channelName,
                    deviceCode: item.parentDeviceCode,
                  };
                }),
                numberList: channelCodeList.length,
                videoThis: this,
              };
              this.player = this.$splitScreen(channelCodeData);
            }
          }
        });
      }

      // _this.isVideoList.monitorName = _this.orderData.deviceName;
      // _this.isVideoList.deviceCode = _this.orderData.deviceCode;
      // _this.isVideoList.channelCode = _this.orderData.channelCode;
      // _this.isVideoList.isVideo = true;
    },
    getShowPTZ() {
      let orderData = this.orderData;
      let noValue =
        orderData.pan !== undefined &&
        orderData.tilt !== undefined &&
        orderData.zoom !== undefined; // 无pan 等值
      let noStrValue =
        orderData.pan != "" && orderData.tilt != "" && orderData.zoom != ""; // pan 等值为''
      let noNumValue =
        Number(orderData.pan) !== 0 ||
        Number(orderData.tilt) !== 0 ||
        Number(orderData.zoom) !== 0; // pan等值为0或0.0等
      return (
        (orderData.warningSource == "1" || orderData.warningSource == "4") &&
        ((noValue && noNumValue && noStrValue) || orderData.presetId)
      );
    },
    /**
     * 关闭编辑标签弹窗
     */
    closeLabel() {
      this.showLabelConfig = false;
    },
    /**
     * 打开编辑标签弹窗
     */
    editAlarmLabel() {
      this.showLabelConfig = true;
    },
    /**
     * 查询督办记录
     */
    getSupervisionRecord() {
      let params = {
        orderId: this.orderData.warningOrderId,
      };
      getHandleRecordByOrderId(params).then((res) => {
        if (res.code === 200) {
          this.supervisionDataSource = res.data.rows;
        }
      });
    },
    handleSupervision() {
      this.isSupervision = true;
    },
  },
  beforeDestroy() {
    this.player?.closeAllVideo();
  },
  data() {
    return {
      getOrderInfo,
      position: [0, 0],
      positionMonitor: [0, 0], //经纬度
      temp: [],
      commandTab: { linkId: 8 },
      currentLinkId: 0,
      linkIdList: [],
      activeName: 0,
      relatedData: [],
      showBigImageVisible: false,
      bigImageUrl: "",
      urlSource: "",
      userIdIsShow: true,
      alarmIsShow: false,
      oldOrderId: "",
      oldList: [],
      judgeResult: "", //研判结果
      judgeDataSource: [], //研判
      dispatchDataSource: [], //调度
      disposalDataSource: [], //处置
      leaderDataSource: [], //领导批示
      verificationDataSource: [], //核实
      dwpDataSource: [], //办理过程
      commandDispatchDataSource: [], //指挥调度
      supervisionDataSource: [], //督办记录
      pageHeight: "85%",
      eChartsWidth: "",
      eChartsHeight: "",
      isShowView: "0",
      curBtn: "基本信息",
      allDataSource: [],
      picClick: false,
      videoUrl: "", //视频url
      power: [],
      orderStatus: "",
      realLinkTypeList: ["1", "2", "4", "5"],
      isVideoList: {
        isVideo: false, //实时视频dialog显示标识
        monitorName: "", //告警摄像机名称
        deviceCode: "", //设备编码
        channelCode: "", //通道编码
        startTime: null, //开始时间
        endTime: null, //结束时间
      },
      showLabelConfig: false, // 编辑告警标签标识
      activeNames: ["1", "2"],
      visitedViews: this.$store.getters.visitedViews,
      isSupervision: false, // 是否展示督办弹窗
      player: null,
    };
  },
};
</script>
<style lang="scss" scoped>
.event_small_tab_height {
  /deep/.el-tabs__header {
    .el-tabs__nav-wrap {
      &:after {
        height: 1px;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@import "@/assets/styles/common/customBaseUi.scss";
$theme: var(--theme);

.page-til {
  font-size: 15px;
  padding: 0 0 0 10px;
}
.eventDetailWrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;

  .container {
    flex: 1;
    overflow: hidden;
    padding: 12px 24px;
    .container-left {
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      .leftClass {
        flex: 1;
        overflow: hidden;
      }
    }
  }
  .custom-hr {
    background-color: #f0f0f0;
    border: none;
    height: 1px;
    margin: 0px;
  }
  .bottom-buttons {
    background-color: #fff;
    width: 100%;
    padding: 13px 18px;
    button {
      margin: 0px 6px;
    }
    .supervision-btn {
      background: #fff;
      color: $theme;
      border: 1px solid $theme;
      &:hover {
        opacity: 0.6;
      }
      &:focus {
        opacity: 0.8;
      }
    }
  }
}

.header-title {
  flex: 1;
  text-align: center;
}

// .tabsPane {
//     margin-top: 30px;
//     // padding: 20px 0;
//     // height: 500px;
// }
.tabsPane >>> .el-tabs__item {
  height: 71px !important;
}
.tabsPane >>> .is-left .el-tabs__nav-prev,
.tabsPane >>> .is-left .el-tabs__nav-next {
  border: 0;
  background-color: #f5f7fa;
  color: #c0c4cc;
  z-index: 10;
}
.tabsPane >>> .el-tabs__active-bar {
  display: none;
}
.tabsPane .el-tabs__nav-wrap.is-left:after {
  width: 0px !important;
}
.tabsPane >>> .el-tabs__item {
  height: 70px;
  color: #606266;
}
.tabsPane >>> .el-tabs__item.is-active {
  color: #fff !important;
}
.tabPane {
  text-align: center !important;
  line-height: 20px !important;
}
.tabsPane >>> .el-tabs__item div {
  background: #f5f7fa;
}
.tabsPane >>> .el-tabs__item.is-active div {
  background: $theme;
}

.btnStyle {
  width: 9.69%;
  height: 40px;
  line-height: 40px;
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #cddbe6;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #b4bdc5;
  cursor: pointer;
}

.leftpic {
  width: 100%;
  height: 40.33%;
}

.rightview {
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  // box-shadow: 0px 10px 12px 3px rgba(213, 210, 233, 0.55);
  border-radius: 8px;
  //margin-top: 40px;
}

.icon {
  width: 8px;
  height: 8px;
  background: $theme;
  border-radius: 50%;
  display: inline-block;
  margin: 10px 5px 10px 8px;
}

.fontStyle {
  height: 30px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 30px;
}

.infospace {
  margin-bottom: 1.5%;
  margin-top: 1.5%;
  float: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100%;
}

.icon {
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  margin-left: 1vh;
  margin-right: 1vh;
}

.buttons {
  display: flex;
  justify-content: space-between;
  .left-btns {
    display: flex;
  }
  //height: 30px;
}

.left-footer {
  padding: 60px 30px 10px;
  .line2 {
    height: 1px;
    border: 1px solid #ededed;
    margin-bottom: 30px;
  }

  .button-container {
    &::after {
      content: "";
      display: block;
      clear: both;
    }
    .buttonClass {
      float: right;
      margin-left: 20px;
      min-width: 76px;
      height: 28px;
      line-height: 28px;
      /*height: 4.5vh;*/
      background: $theme;
      border-radius: 12px;
      border: 1px solid $theme;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      margin-right: 0px;
      font-size: 14px !important;
      cursor: pointer;
      /deep/ .collect-icon {
        font-size: 14px;
        margin-right: 5px;
      }
    }
    .buttonClassPlain {
      float: right;
      margin-left: 20px;
      min-width: 76px;
      height: 28px;
      line-height: 28px;
      /*height: 4.5vh;*/
      border-radius: 12px;
      border: 1px solid $theme !important;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 0px;
      font-size: 14px !important;
      cursor: pointer;
      background: #ffffff !important;
      color: $theme !important;
    }
  }
}

.buttonClass1 {
  flex-basis: 100%; /*平均分布方法1*/
  width: 15%;
  min-width: 30px;
  height: 45px;
  background: #ffffff;
  // border-radius: 25px;
  border: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 0px;
  color: #333333;

  &:not(:last-child) {
    border-right: 0px;
  }

  &.active {
    color: $theme;
  }

  &:focus,
  &:hover {
    background-color: transparent;
    border-color: #dcdfe6;
  }
}

.buttonClass1 span {
  width: 50px;
  height: 3vh;
  /*font-size: 14px;*/
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #b4bdc5;
  line-height: 3vh;
}

/deep/ .buttonClass1 .el-button:focus,
/deep/ .buttonClass1 .el-button:hover {
  background: #f5f5f5 !important;
  border-color: #cddbe6 !important;
  color: #999 !important;
  box-shadow: 0 0 0 0 transparent !important;
}

/deep/ .el-button + .el-button {
  margin-left: 0px;
}

.returnClass {
  float: right;
  margin-right: 10px;
  background: $theme;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff !important;
}

/deep/ .imageClass {
  width: 100%;
  height: 75vh;
  max-width: 100%;
  max-height: 100%;
}
.returnClass:hover {
  color: #ffffff;
  background-color: $theme;
  -webkit-box-shadow: 0 5px 5px 1px rgba(255, 106, 108, 0.25) !important;
  box-shadow: 0 5px 5px 1px rgba(255, 106, 108, 0.25) !important;
}

.audioStyle {
  width: 120px;
  height: 19px;
  background: #f2f5f8;
  border-radius: 20px;
  border: 1px solid #cddbe6;
  line-height: 19px;
  margin-left: 5px;
}

.passAudioStyle {
  font-size: 10px;
  font-weight: 700;
  line-height: 22px;
  height: 22px;
  display: inline-block;
  margin-left: 11px;
}

.themeStyle .buttonClassPlain {
  background: var(--themebtnColor) !important;
  border: 1px var(--themebtnColor) solid !important;
  border-radius: 20px;
}
.themeStyle .is-plain.buttonClassPlain {
  background: #ffffff !important;
  border: 1px var(--themebtnColor) solid !important;
  border-radius: 20px;
}
.themeStyle .buttonClassPlain span {
  color: #ffffff;
  font-weight: 400;
}
.themeStyle .buttonClassPlain.is-plain span {
  color: var(--themebtnColor);
  font-weight: 400;
}
/deep/ .el-tabs--left .el-tabs__nav-wrap.is-left::after {
  display: none;
}
</style>
<style lang="scss" scoped>
.tabsPane .el-tabs__nav-wrap.is-left::after {
  width: 0px !important;
}

/deep/ .el-table {
  th.is-leaf {
    border-color: #ebeef5;
    background: #f5f7fa;
  }

  th > .cell {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #606266;
    white-space: nowrap;
  }

  &.el-table--border {
    border-color: #eeeeee;

    td {
      border-color: #eeeeee;
    }
  }
}
/deep/ .el-tabs__header {
  margin: 0 0 12px;
}
/deep/ .el-tabs__nav {
  // margin-top: 10px;

  .el-tabs__item {
    padding: 0 10px;
    height: 36px;
    line-height: 36px;
  }
}
/deep/ .el-tabs__header.is-left {
  margin-right: 12px !important;
}
/deep/.el-tabs--left .el-tabs__nav-wrap.is-left.is-scrollable {
  padding: unset;
}
/deep/ .el-tabs__nav.is-left {
  top: 42px;
  //   bottom: 42px;
  padding-bottom: 42px;
  .el-tabs__item {
    padding: 0;
  }
}
/deep/.el-scrollbar__view {
  overflow-x: hidden;
}
/deep/.el-scrollbar__bar.is-vertical {
  width: 1px;
}
/deep/.el-scrollbar.is-vertical {
  transform: translateX(4px);
}
/deep/.scrollbar .el-scrollbar__thumb {
  background: transparent;
}
.rightview /deep/.el-scrollbar__wrap {
  padding-bottom: 6vh;
}
.time-line {
  height: 100%;
}
.time-line /deep/.el-scrollbar__wrap {
  padding-bottom: 6vh;
}
.view {
  height: 100%;
  overflow-y: scroll;
  padding-bottom: 0;
}

/deep/.height-full .el-tabs__content {
  height: 100%;
}
.round-style {
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
}
/deep/.el-tabs__nav.is-top .el-tabs__item.is-top {
  padding: 0 12px !important;
}

::v-deep .el-collapse {
  border: none;

  .el-collapse-item__wrap {
    border: none;
  }

  .el-collapse-item__header {
    height: unset;
    line-height: unset;
    border: none;
  }
  .el-form-item__label {
    padding-right: 12px;
  }
  .el-collapse-item__content {
    padding-bottom: 0;
  }
  .el-collapse-item {
    .el-icon-arrow-right:before {
      font-weight: bold;
      color: #606266;
      font-size: 16px;
    }
  }
}
.common-scroll {
  height: 100%;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 6px;
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    width: 6px;
    border: none;
    background: #eaeaea;
    border-radius: 5px 5px 5px 5px;
  }
}
#mapbox-wrapper {
  height: 100%;
  position: absolute;
  left: 9999px;
  top: 0;
}
</style>
